<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>[[${video.video_title}]]</title>
    <link th:href="@{css/video-js.css}" rel="stylesheet">
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{js/video.min.js}"></script>
    <script th:src="@{js/flv.min.js}"></script>
    <script th:src="@{js/videojs-flvjs.min.js}"></script>
    <style type="text/css">
        .videolist { position:relative; float:left; width:1200px; height:600px; margin-right:150px; margin-top:15px; margin-bottom:30px; }
        .videolist:hover{ cursor: pointer; }
        .videoed { display:none; width:50px; height:50px; position: absolute; left:45%; top:45%; z-index:99; border-radius:100%; }

        .vclose {width: 25px; height: 25px; position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; }
        .vtit{
            width: 1190px;
            height: 60px;
            padding-left: 10px;
            position: absolute;
            font-family: "微软雅黑";
            font-size: 22px;
            font-weight: bold;
            line-height: 60px;
            left: 50%;
            margin-left: -600px;
            top: 10px;

            overflow:hidden;
            word-break:keep-all;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        .vtime{
            width: 1200px;
            height: 35px;
            font-family: "微软雅黑";
            font-size: 12px;
            font-weight: bold;
            line-height: 35px;
            position: absolute;
            color: #999;
            left: 50%;
            margin-left: -600px;
            margin-top: 60px;

            overflow:hidden;
            word-break:keep-all;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        .vtime>.date,.vtime>.hits,.vtime>.time,.vtime>.author{
            position: absolute;

            height: 100%;
        }
        .vtime>.date{
            width: 150px;
            margin-left: 25px;
        }
        .vtime>.hits{
            width: 100px;
            margin-left: 225px;
        }
        .vtime>.time{
            width: 100px;
            margin-left: 375px;
        }
        .vtime>.author{
            width: 200px;
            margin-left: 525px;
        }
        .video-js{
            top: 100px;
        }
        .video-js .vjs-big-play-button{
            font-size: 5em;
            line-height: 3.65em;
            height: 4em;
            width: 4em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 2.5em;
            background-color: #73859f;
            background-color: rgba(115,133,159,.5);
            border-width: 0.15em;
            margin-top: -2.5em;
            margin-left: -2.5em;
        }
        /* 中间的播放箭头 */
        .vjs-big-play-button .vjs-icon-placeholder {
            font-size: 1.63em;
        }
        /* 加载圆圈 */
        .vjs-loading-spinner {
            font-size: 2.5em;
            width: 2em;
            height: 2em;
            border-radius: 1em;
            margin-top: -2em;
            margin-left: -2em;
        }
        .vjs-paused .vjs-big-play-button,
        .vjs-paused.vjs-has-started .vjs-big-play-button {
            display: block;
        }
        .video-js .vjs-time-control{display:block;}
        .video-js .vjs-remaining-time{display: none;}
        .sorry{
            width: 1200px;
            height: 600px;
            position: absolute;
            display: none;
            line-height: 600px;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            user-select: none;
        }
    </style>
</head>
<body>
<input id="inp" type="hidden" th:value="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/file/'}+${video.video_file_path}">
<div class="video">
    <div class="container">
        <div class="videolist">
            <div class="vtit" th:text="${video.video_title}"></div>
            <div class="vtime">
                <div class="date">[[${video.release_time}]]</div>
                <div class="hits">[[${video.number_of_hits}]]</div>
                <div class="time">[[${video.video_time}]]</div>
                <div class="author">[[${video.video_author}]]</div>
            </div>
            <div class="sorry">T_T抱歉，该浏览器暂不支持该格式，可以前往IE或者360浏览器！</div>
            <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered"  width="1200" height="600"></video>
            <!--            <img src="play.jpg" class="videoed"/>-->
        </div>
    </div>
</div>
<script>

    var text = document.getElementById("inp");
    var element = document.getElementById("videojs-flvjs-player");
    var player;

    var flvUrl = text.getAttribute("value");
    console.log("flvUrl = "+flvUrl);

    if(flvUrl.endsWith("avi")){ // 当为AVI格式的视频时，提示不可播放
        document.getElementsByClassName("sorry")[0].style.display = "block";
        element.style.display = "none";
        document.getElementsByClassName("vtit")[0].style.display = "none";
        document.getElementsByClassName("vtime")[0].style.display = "none";
    }else{      // 否则，正常播放
        player = videojs(element, {
            techOrder: ['html5', 'flvjs'],
            flvjs: {
                mediaDataSource: {
                    isLive: true,
                    cors: true,
                    withCredentials: false,
                },
            },
            sources: [{
                src: flvUrl,
                type: 'video/x-flv'
            }],
            controls: true,
            preload: "none"
        }, function onPlayerReady() {
            console.log('player ready1')

            player.on('error', (err) => {
                console.log('first source load fail')

                player.ready(function () {
                    console.log('player ready2')
                    player.load();
                    player.play();
                });
            })
        });
    }

    //禁用右键（防止右键查看源代码）
    // window.oncontextmenu=function(){return false;}
    //禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
    // window.onkeydown = window.onkeyup = window.onkeypress = function () {
    //     window.event.returnValue = false;
    //     return false;
    // }
    // //如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
    // var h = window.innerHeight,w=window.innerWidth;
    // window.onresize = function () {
    //     if (h!= window.innerHeight||w!=window.innerWidth){
    //         alert("你想用开发者工具？那是不可能的，小老弟 -_-!!!");
    //         window.close();
    //         window.location = "about:blank";
    //     }
    // }

</script>
</body>
</html>

